<template>
  <section class="js-mind-box">
    <div :class="{ 'status-types': true, 'not-show': mindId !== 'mind-box' }">
      <span v-for="item in statusTypes" :key="item" class="status-item">{{
        item
      }}</span>
    </div>
    <div :id="mindId" class="js-mind"></div>
  </section>
</template>

<script>
import "../jsmind/style/jsmind.scss";
// 修改了 create_node_element 函数
import jsMind from "../jsmind/js/jsmind.js";

export default {
  name: "JsMind",
  props: {
    mindId: {
      type: String,
      default: "mind-box",
    },

    isShort: {
      type: Boolean,
      default: false,
    },

    mindData: {
      type: Object,
      default: () => ({
        evaluationTarget: "电站",
        fraction: "--",
        totalSystemScore: "--",
        id: 1,
        idLevel: "1_0",
        level: 0,
        noteName: "暂无数据",
        params: {},
        parentName: "",
        children: [],
      }),
    },

    isEditable: {
      type: Boolean,
      default: false,
    },

    statusTypes: {
      type: Array,
      default: () => ["正常状态", "注意状态", "异常状态", "危险状态"],
    },
  },

  data() {
    return {
      jm: null,
      mind: {
        meta: {
          name: "状态评价",
          author: "-----@163.com",
          version: "0.2",
        },
        format: "node_tree",
        data: this.mindData,
      },
      hasLevelThree: false,
    };
  },

  watch: {
    mindData: {
      handler(val) {
		console.log('mindData',val);
        if (val) {
          document.getElementById(this.mindId).innerHTML = ""; // 清除前一个JSMind
          this.hasLevelThree = this.mindData.children.some((item) => {
            return !!item.children;
          });
          this.mind.data = val;
          // this.jm.show(this.mind)
          this.loadJsMind();
        }
      },
      deep: true,
	//   immediate:true
    },
  },
  mounted() {
    this.loadJsMind();
  },

  methods: {
    // 获取JSMind数据
    getMindData() {
      return this.jm.get_data().data;
    },

    // 创建jsMind
    loadJsMind() {
      const options = {
        container: this.mindId,
        editable: this.isEditable,
        view: {
          engine: "canvas",
          line_width: 2,
          line_color: "#236cd0",
        },
        layout: {
          hspace: this.isShort ? 20 : this.hasLevelThree ? 150 : 300,
          vspace: 10,
        },
      };
		console.log('loadJsMind',this.mind);
      this.jm = new jsMind(options);
	  if(!this.mindData) {
		console.log('return');
		return
	  }
      this.jm.show(this.mind);

      document.getElementById(this.mindId).onclick = (e) => {
        if (
          e.target.className === "m-score" ||
          e.target.className === "m-score-total"
        ) {
          var id_level = e.target.parentNode.getAttribute("nodeid");
          if (id_level === null) {
            id_level = e.target.parentNode.parentNode.getAttribute("nodeid");
          }
          var noteName =
            e.target.parentNode.parentNode.querySelector(".m-label")?.innerText;
          this.$emit("node-click", id_level, noteName);
        } else if (e.target.className === "m-label") {
          var id_level = e.target.parentNode.getAttribute("nodeid");
          var noteName =
            e.target.parentNode.querySelector(".m-label")?.innerText;
          this.$emit("node-click", id_level, noteName);
        }
        return;
        if (
          e.target.className === "m-label" ||
          e.target.className === "m-value"
        ) {
          const score = e.target.parentNode
            .querySelector(".m-score-total")
            ?.innerHTML.split("：")[1];
          this.$emit(
            "node-click",
            e.target.parentNode.getAttribute("nodeid"),
            score
          );
        } else if (
          e.target.className === "m-score" ||
          e.target.className === "m-score-total"
        ) {
          const score = e.target.parentNode.parentNode
            .querySelector(".m-score-total")
            ?.innerHTML.split("：")[1];
          this.$emit(
            "node-click",
            e.target.parentNode.parentNode.getAttribute("nodeid"),
            score
          );
        }
      };
    },

    // 重置主题
    resetJsMindTheme(theme) {
      this.jm.set_theme(theme);
    },
  },
};
</script>

<style lang="scss" scoped>
// @import '../../../../utils/jsmind/style/jsmind.scss';
.js-mind-box {
  height: 100%;

  .js-mind {
    height: calc(100% - 44px);

    // ::v-deep jmnode[nodeid$='_2'] .m-value {
    // color: #555;
    // background: #bcd8ff;
    // }
  }

  .status-types {
    padding: 10px 0;
    text-align: center;
    font-size: 16px;
    color: #333;
    z-index: 3;

    .status-item {
      position: relative;
      padding: 0 20px;

      &::before {
        content: "";
        position: absolute;
        top: 3px;
        left: 0;
        width: 16px;
        height: 16px;
      }

      &:nth-of-type(1)::before {
        background-color: #2fd023;
      }

      &:nth-of-type(2)::before {
        background-color: #ffcc00;
      }

      &:nth-of-type(3)::before {
        background-color: #ff9600;
      }

      &:nth-of-type(4)::before {
        background-color: #ff3600;
      }
    }

    &.not-show {
      visibility: hidden;
    }
  }
}
</style>
